/* 主题变量 */
:root {
  /* 主色调 */
  --app-primary-color: #12b8f6;
  --app-primary-hover: #24c5fa;
  --app-primary-light: #e6f7ff;

  /* 背景色 */
  --app-bg-color: #f9fbfd;
  --app-bg-color-light: #f0f5fa;
  --app-bg-color-card: rgba(255, 255, 255, 0.9);

  /* 文本颜色 */
  --app-text-primary: #303133;
  --app-text-regular: #606266;
  --app-text-secondary: #909399;
  --app-text-placeholder: #c0c4cc;

  /* 边框颜色 */
  --app-border-color: #e4e7ed;
  --app-border-color-light: #ebeef5;

  /* 阴影 */
  --app-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  --app-shadow-base: 0 4px 16px rgba(0, 0, 0, 0.08);
  --app-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* 圆角 */
  --app-radius-sm: 4px;
  --app-radius-md: 8px;
  --app-radius-lg: 12px;

  /* 梯度背景 */
  --app-gradient-primary: linear-gradient(135deg, #12b8f6, #6dd5fb);
  --app-gradient-card: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.85)
  );
}

/* 暗黑模式变量 */
:root.dark,
html.dark-mode {
  /* 主色调 */
  --app-primary-color: #1e90ff;
  --app-primary-hover: #40a9ff;
  --app-primary-light: #111a2c;

  /* 背景色 */
  --app-bg-color: #1a1a1a;
  --app-bg-color-light: #242424;
  --app-bg-color-card: rgba(32, 32, 36, 0.9);

  /* 文本颜色 */
  --app-text-primary: #e0e0e0;
  --app-text-regular: #b0b0b0;
  --app-text-secondary: #909090;
  --app-text-placeholder: #606060;

  /* 边框颜色 */
  --app-border-color: #404040;
  --app-border-color-light: #303030;

  /* 阴影 */
  --app-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  --app-shadow-base: 0 4px 16px rgba(0, 0, 0, 0.25);
  --app-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.3);

  /* 梯度背景 */
  --app-gradient-primary: linear-gradient(135deg, #1e90ff, #40a9ff);
  --app-gradient-card: linear-gradient(135deg, rgba(32, 32, 36, 0.92), rgba(32, 32, 36, 0.85));
}

/* 透明度和混合模式 */
.glass-card {
  backdrop-filter: blur(10px);
  background: var(--app-bg-color-card);
  border: 1px solid var(--app-border-color-light);
  box-shadow: var(--app-shadow-light);
  border-radius: var(--app-radius-md);
}
